<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="plugins/aui-20170109-v2/css/aui.css" type="text/css"/>
    <link rel="stylesheet" href="css/lifeNumber-css.css" type="text/css" />
    <title>生活号</title>
</head>
<body>

<header class="aui-bar aui-bar-nav aui-bar-light">
    <a class="aui-pull-left aui-btn" href="friend.html">
        <span class="aui-iconfont aui-icon-left">朋友</span>

    </a>
    <div class="aui-title">
        <div class="aui-searchbar" id="search">
            <div class="aui-searchbar-input aui-border-radius" tapmode onclick="doSearch()">
                <i class="aui-iconfont aui-icon-search"></i>
                <form action="javascript:search();">
                    <input type="search" placeholder="搜索你感兴趣的公众号" id="search-input">
                </form>
            </div>
        </div>
    </div>
    <a class="aui-pull-right aui-btn">
        <span class="aui-iconfont aui-icon-more"></span>
    </a>
</header>

<div class="aui-tab" id="tab">
    <div class="aui-tab-item aui-active">最新动态</div>
    <div class="aui-tab-item"><div></div>已关注</div>
</div>
<div class="aui-content aui-margin-b-15">
    <ul class="aui-list aui-media-list">
        <li class="aui-list-item aui-list-item-middle btn1">
            <div class="aui-media-list-item-inner">
                <div class="aui-list-item-media" style="width: 3rem;">
                    <span class="aui-img-round aui-list-img-sm"></span>
                    <div class="aui-dot"></div>
                </div>
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-text">
                        <div class="aui-list-item-title aui-font-size-14">圆通速递</div>
                    </div>
                    <div class="aui-list-item-text">
                        更新42条
                    </div>
                </div>
            </div>
            <div class="aui-media-list-item-inner">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-title">【2018新茶】不到百元就能喝到真正的西湖龙井，买两件还能省20元</div>
                    <div class="aui-list-item-text">
                        17:03
                    </div>
                </div>
                <div class="aui-list-item-media">
                    <img src="img/hgdlzh_07.jpg">
                </div>
            </div>
        </li>
        <li class="aui-list-item aui-list-item-middle btn2">
            <div class="aui-media-list-item-inner">
                <div class="aui-list-item-media" style="width: 3rem;">
                    <img class="aui-img-round aui-list-img-sm" src="img/lifeNumber-img/shh-05.jpg" />
                    <div class="aui-dot"></div>
                </div>
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-text">
                        <div class="aui-list-item-title aui-font-size-14">天弘基金</div>
                    </div>
                    <div class="aui-list-item-text">
                        更新49条
                    </div>
                </div>
            </div>
            <div class="aui-media-list-item-inner">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-title">早知道|干扰因素增加，整体谨慎乐观</div>
                    <div class="aui-list-item-text">
                        <img src="img/lifeNumber-img/shh-03.jpg"/> 1406
                        <span>17:03</span>
                    </div>
                </div>
                <div class="aui-list-item-media">
                    <img src="img/hgdlzh_07.jpg">
                </div>
            </div>
        </li>
        <li class="aui-list-item aui-list-item-middle btn3">
            <div class="aui-media-list-item-inner">
                <div class="aui-list-item-media" style="width: 3rem;">
                    <span class="aui-img-round aui-list-img-sm bc"></span>
                    <div class="aui-dot"></div>
                </div>
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-text">
                        <div class="aui-list-item-title aui-font-size-14">携程旅行网</div>
                    </div>
                    <div class="aui-list-item-text">
                        更新42条
                    </div>
                </div>
            </div>
            <div class="aui-media-list-item-inner">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-title">一机在手畅游全世界只能AI出国贴身的口袋翻译官</div>
                    <div class="aui-list-item-text">
                        <img src="img/lifeNumber-img/shh-03.jpg"/> 3084
                        <img class="img-mag" src="img/lifeNumber-img/shh-04.jpg"/> 126
                        <span>星期五</span>
                    </div>
                </div>
                <div class="aui-list-item-media">
                    <img src="img/hgdlzh_07.jpg">
                </div>
            </div>
        </li>
    </ul>
</div>

<div class="fixed box1">
    <div class="fixed-bg-color">
        <div class="pick1">取消关注</div>
        <div class="up1">置顶</div>
        <div class="delete1">删除该聊天</div>
    </div>
</div>

<div class="fixed box2">
    <div class="fixed-bg-color">
        <div class="pick2">取消关注</div>
        <div class="up2">置顶</div>
        <div class="delete2">删除该聊天</div>
    </div>
</div>

<div class="fixed box3">
    <div class="fixed-bg-color">
        <div class="pick3">取消关注</div>
        <div class="up3">置顶</div>
        <div class="delete3">删除该聊天</div>
    </div>
</div>

<div class="fixed box4">
    <div class="fixed-bg-color">
        <div>取消关注[圆通速递]后，将不再收到其下发的消息</div>
        <div class="text">
            <span class="remove1">取消</span><span class="remove2">不再关注</span>
        </div>
    </div>
</div>

<div class="fixed box5">
    <div class="fixed-bg-color">
        <div>取消关注[天弘基金]后，将不再收到其下发的消息</div>
        <div class="text">
            <span class="remove3">取消</span><span class="remove4">不再关注</span>
        </div>
    </div>
</div>

<div class="fixed box6">
    <div class="fixed-bg-color">
        <div>取消关注[携程旅行网]后，将不再收到其下发的消息</div>
        <div class="text">
            <span class="remove5">取消</span><span class="remove6">不再关注</span>
        </div>
    </div>
</div>

<div class="fixed box7">
    <div class="fixed-bc">
        <div><img src="img/lifeNumber-img/gz.png"> <span>已关注生活号</span></div>
        <div><img src="img/lifeNumber-img/cyfw.png"> <span>常用服务</span></div>
        <div><img src="img/friend-img/tjpy.png"> <span>添加生活号</span></div>
        <div class="san"></div>
    </div>
</div>


<script type="text/javascript" src="plugins/aui-20170109-v2/script/aui-tab.js"></script>
<script type="text/javascript" src="jquery/jquery.min.js"></script>

<script>
    $(function () {
       $(".btn1").click(function () {
          $(".box1").show();
       });
        $(".box1").click(function () {
            $(".box1").hide();
        });
        $(".pick1").click(function () {
            $(".box4").show();
        });
        $(".remove1").click(function () {
            $(".box4").hide();
        });
        $(".remove2").click(function () {
            $(".box4").hide();
            $(".btn1").hide();
        });
        $(".up1").click(function () {
           var addedLI = $.cookie("addedLI");
           if (addedLI != null){
               var strArray = addedLI.split(",");
               for (var i = 0;i < strArray.length;i++){
                   $("#" + strArray[i]).addClass('act');
                   $("#" + strArray[i]).parent().prepend($("#" + strArray[i]));
               }
           }
        });
        $(".delete1").click(function () {
           $(".box1").hide();
           $(".btn1").hide();
        });
        $(".btn2").click(function () {
            $(".box2").show();
        });
        $(".box2").click(function () {
            $(".box2").hide();
        });
        $(".pick2").click(function () {
            $(".box5").show();
        });
        $(".remove3").click(function () {
            $(".box5").hide();
        });
        $(".remove4").click(function () {
            $(".box5").hide();
            $(".btn2").hide();
        });
        $(".up2").click(function () {
            var addedLI = $.cookie("addedLI");
            if (addedLI != null){
                var strArray = addedLI.split(',');
                for (var i = 0;i < strArray.length;i++){
                    $("#" + strArray[i]).addClass('act');
                    $("#" + strArray[i]).parent().prepend($("#" + strArray[i]));
                }
            }
        });
        $(".delete2").click(function () {
            $(".box2").hide();
            $(".btn2").hide();
        });
        $(".btn3").click(function () {
            $(".box3").show();
        });
        $(".box3").click(function () {
            $(".box3").hide();
        });
        $(".pick3").click(function () {
            $(".box6").show();
        });
        $(".remove5").click(function () {
            $(".box6").hide();
        });
        $(".remove6").click(function () {
            $(".box6").hide();
            $(".btn3").hide();
        });
        $(".up3").click(function () {
            var addedLi = $.cookie(".aui-list-item");
            if (addedLi != null){
                var strArray = addedLi.split(",");
                for (var i = 0;i < strArray.length;i++){
                    $("#" + strArray[i]).addClass('act');
                    $("#" + strArray[i]).parent().prepend($("#" + strArray[i]));
                }
            }
        });
        $(".delete3").click(function () {
            $(".box3").hide();
            $(".btn3").hide();
        });
    });
</script>

</body>
</html>